<template>
  <div class="item_box">
    <upperSide/>
  </div>
  <div class="item_box">
    <middle/>
  </div>
  <div class="item_box">
    <underside/>
  </div>
</template>
<script setup lang="ts">
import middle from "./components/middle/index.vue";
import upperSide from "./components/upperSide/index.vue";
import underside from "./components/underside/index.vue";
import { onMounted } from "vue";
import { useEcharts } from "../../hook/ useEcharts";

// 使用自定义 Hook
const { chartRef, initChart, updateChart } = useEcharts();

// 定义 Echarts 配置选项
const option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
    },
  ],
};

// 初始化图表
initChart(option);

// 模拟更新图表数据
const updateData = () => {
  const newOption = {
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
      },
    ],
  };
  updateChart(newOption);
};

onMounted(() => {
  // 初始化图表
  // initChart(option);
});
// 可以在适当的时候调用 updateData 函数来更新图表
</script>
<style scoped>
.item_box{
  width: 1040px;
  height: 321px;
}
.item_box:first-child {
  background-image: url('./img/sjzl.png');
}
.item_box:nth-child(2){
  margin-top: 10px;
  background-image: url('./img/sjzlybtz.png');
}
.item_box:last-child{
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
}
.item_box_left {
  width: 514px;
  background-image: url('./img/sjaq.png');
}
.item_box_right{
  width: 514px;
  background-image: url('./img/sjgxkf.png');
}
</style>
